<template>
	<view class="goodsDetails">
		<TopHead :title="'商品详情'"></TopHead>
		<view class="conbox">
			<view class="swiperBox">
				<swiper class="index-section-swiper" :indicator-dots="false" indicator-color="#BFCFFD"
					indicator-active-color="#CF712B" circular @change="swiperChange">
					<swiper-item class="swiper-item" v-for="(item,index) in goodsInfo.resourcesList" :key="index">
						<image :src="path+item.resUrl" mode="" class="cell-icon"></image>
					</swiper-item>
				</swiper>
				<view class="dots">{{swiperCurrent + 1}}/{{swiperLength}}</view>
			</view>
			<view class="box1">
				<view class="box1-title1">
					{{goodsInfo.name}}
					<view class="call-store" @click="phoneCall(goodsInfo.store)">联系商户</view>
				</view>
				<view class="box1-title2">{{goodsInfo.introduction}}</view>
				<view class="box1-title3">
					<text class="text-totlo1">￥</text><text
						class="text-totlo2">{{(goodsInfo.price/100 || 0).toFixed(2)}}</text>
					<view class="sum-view">
						<text class="reduce add1" @click="reduce">-</text>
						<text class="add">{{numer}}</text>
						<text class="add1 add2" @click="addNum">+</text>
					</view>
				</view>
			</view>
		 
			<view class="box1 box2" v-show="goodsInfo.specificationList.length>0">
				<view v-for="(item,j) in goodsInfo.specificationList" :key="j">
					<view class="orderbox1">
						<text class="leftText"></text>
						<text>{{item.specificationName}}</text>
					</view>
					<view class="text-view" v-if="item.specificationType==1">
						<text v-for="option in item.itemList" :key="option.value" @click="setOpt(option,item)"
							:class="item.value.id == option.id ? 'active' : ''"> {{option.value}}</text>
					</view>
					<view class="text-view" v-if="item.specificationType==2">
						<input class="uni-input ipt" type="number" v-model="item.value" placeholder="请输入内容" />
					</view>
				</view>
				<!-- <view>
					<view class="orderbox1">
						<text class="leftText"></text>
						<text>糖度</text>
					</view>
					<view class="text-view">
						<text @click="xuanze2(index)" :class="xzid2==index?'active':''" v-for="(item,index) in xzList2"
							:key="index">{{item.title}}</text>
					</view>
				</view> -->
				<view   class="selected">已选择：
					<view style="display: inline-block;" v-for="item in goodsInfo.specificationList" :key="item.id">
						<text v-if="item.specificationType ==1&&item.value">{{item.value.value}}、</text>
						<text v-if="item.specificationType ==2&&item.value">{{item.value}}、</text>
					</view>

				</view>
			</view>
			<view class="box1 box2">
				<view class="orderbox1">
					<text class="leftText"></text>
					<text>商品详情</text>
				</view>
				<view class="details" v-for="option in goodsInfo.propertyList" :key="option.id">
					<view class="details-title1">{{option.propertyName}}</view>
					<!-- <view class="details-title2" v-html="option.propertyValue"></view> -->
					<view class="details-title2" >
						<mp-html :content="option.propertyValue" />
					</view>
				</view>
			</view>
			<view class="box1 box2">
				<view class="orderbox1">
					<text class="leftText"></text>
					<text>用户评价</text>
				</view>
				<comment-list :commentList="commentList"></comment-list>
				<view v-if="commentTotal>0" class="qbComments-view" @click="toCommentList()">全部{{commentTotal}}条评论
				</view>
				<view v-if="commentTotal<1" class="qbComments-view">暂无评论</view>
			</view>

		</view>
		<view class="btnbox">
			<view class="btn" @click="submit()">立即购买</view>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	import CommentList from '../../components/basics/commentList.vue';
	export default {
		components: {
			TopHead,
			CommentList
		},
		data() {
			return {
				
				store:{},
				path: this.$http.tpUrl + '/', // 图片前缀	
				swiperCurrent: 0,
				numer: 1, // 数量
				xzList: [{
						title: '冰'
					},
					{
						title: '热'
					},

				],
				xzList2: [{
						title: '不另外加糖'
					},
					{
						title: '半糖'
					},
					{
						title: '全糖'
					},
				],
				xzid: 0, // 
				xzid2: 0, // 
				selected: '', // 已选择
				ProductEntityId: '', //  商品id
				goodsInfo: {}, // 商品信息
				commentList: [
					// {
					// 	userName: '郑毅',
					// 	headImage: 'https://ceres.zkthink.com/static/img/user/morentouxiang.png',
					// 	score: 4,
					// 	info: '这是一个好问题，但是你不配得到答案，这是一个好问题，但是你不配得到答案...',
					// 	photoList: ['https://ceres.zkthink.com/static/img/user/morentouxiang.png',
					// 		'https://ceres.zkthink.com/static/img/user/morentouxiang.png'
					// 	],
					// 	createTime: '202403-19 16:30',

					// },
					// {
					// 	userName: '郑毅',
					// 	headImage: 'https://ceres.zkthink.com/static/img/user/morentouxiang.png',
					// 	score: 4,
					// 	info: '这是一个好问题，但是你不配得到答案，这是一个好问题，但是你不配得到答案...',
					// 	photoList: ['https://ceres.zkthink.com/static/img/user/morentouxiang.png',
					// 		'https://ceres.zkthink.com/static/img/user/morentouxiang.png'
					// 	],
					// 	createTime: '202403-19 16:30',

					// },
				],
				commentTotal: 0, // 评论总条数
				swiperLength: 1, // 
			}
		},
		onLoad(options) {
			console.log('options', options)
			this.ProductEntityId = options.ProductEntityId
			this.init()
			this.$nextTick(() => {
				this.initData()
			})
		},
		onShow() {

			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {

			setOpt(i, item) {
				console.log(i, item, "---1---")
				this.$set(item, "value", i);
			},
			submit() {
				let _this = this
				let ls = this.goodsInfo.specificationList
				for (let j = 0; j < ls.length; j++) {

					if (ls[j].value == '' || ls[j].value == null || ls[j].value == undefined) {
						console.log('请选择规格000000000000')
						uni.showToast({
							icon: 'none',
							title: '请选择/输入规格'
						})
						return
					}
				}

				let form = this.goodsInfo.specificationList.map((i) => {
					// console.log(i)
					let v = {
						specificationId: '',
						specificationValueList: []

					}
					// if (i.specificationType == 1 && i.value) {
					// 	v.specificationId = i.id
					// 	let h = {
					// 		specificationId: i.value.specificationId,
					// 		specificationValueId: i.value.id,
					// 		value: i.value.value
					// 	}
					// 	v.specificationValueList.push(h)
					// }
					switch (i.specificationType) {
						case 1:
							v.specificationId = i.id
							let h = {
								specificationId: i.value.specificationId,
								specificationValueId: i.value.id,
								value: i.value.value
							}
							v.specificationValueList.push(h)
							break
						case 2:
							v.specificationId = i.id
							let m = {
								value: i.value
							}
							v.specificationValueList.push(m)
							break

						default:
							break
					}
					return v
				})
				console.log(form)
				if (form.length != this.goodsInfo.specificationList.length) {
					console.log("请选择规格")
					return
				}
				// console.log(JSON.stringify(form))

				let userId = uni.getStorageSync('id')
				let sellerId = uni.getStorageSync('sellerId')
				let data = {
					remark: '',
					userAddressId: '', // 地址id
					userId: userId,
					sellerId: sellerId,
					orderItemList: [{
						amount: _this.numer, // 数量
						productEntityPriceId: _this.goodsInfo.productEntityPriceId, //  是价格Id
						specificationList: form
					}]
				}
console.log("order Data",data);
				uni.showLoading({
					mask: true,
					title: '请求中...',
				})
				console.log(data)
				// return
				_this.$http.fetchData({
					url: '/wechatApplet/customer/order/',
					method: 'POST',
					data: data,
					success(res) {
						uni.hideLoading()
						console.log(res)
						if (res.code == 200) {
							_this.toConfirmOrder(res.data)
						} else {
							uni.showToast({
								icon: 'none',
								title: '下单失败'
							})
						}

					}
				})
			},
			//  去确认订单
			toConfirmOrder(orderId) {
				let paramsStr =
					`?ProductEntityId=${this.ProductEntityId}&numer=${this.numer}&selected=${this.selected}&orderId=${orderId}`
				console.log(paramsStr)
				uni.navigateTo({
					url: `/pages_category_page1/order/confirmOrder${paramsStr}`
				})
			},

			init() {
				this.selected = this.xzList[0].title + '、' + this.xzList2[0].title
			},
			// 数据请求示例
			initData() {
			 
				let _this = this;
				let ProductEntityId = this.ProductEntityId
				// let ProductEntityId = '1714230042841005'
				_this.$http.fetchData({
					url: '/wechatApplet/customer/productEntity/' + ProductEntityId,
					method: 'GET',
					data: {},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.goodsInfo = res.data
					 console.log("_this.goodsInfo",_this.goodsInfo);
					 _this.store=_this.goodsInfo.store;
						let swiperLength = res.data.resourcesList
						if(swiperLength){
							_this.swiperLength = swiperLength.length
						}
						
						_this.evaluateData()
					}
				})
			},
			// 获取评论
			evaluateData() {
				let _this = this;
				let data = {
					page: 1,
					pageSize: 5,
					userId: uni.getStorageSync('id'),
					productEntityId: _this.ProductEntityId
				}
				_this.$http.fetchData({
					url: '/wechatApplet/customer/evaluate/',
					method: 'GET',
					data: data,
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });

						let commentList = res.data.list
						commentList.forEach((item) => {
							console.log(item);
							for (let i = 0; i < item.photoList.length; i++) {
								item.photoList[i] = _this.path + item.photoList[i]
							}
						})
						_this.commentList = commentList
						_this.commentTotal = res.data.total
						console.log(_this.commentList)

					}
				})
			},
			// dianhua
			phoneCall(item) {
				console.log("this.store",item);
				var phone =item.phone;
				console.log(phone);
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			//图片变化时
			swiperChange(e) {
				// console.log(e)
				this.swiperCurrent = e.detail.current

			},
			// 减少
			reduce() {
				if (this.numer == 1) {
					uni.showToast({
						icon: 'none',
						title: '数量不能少于1',
						duration: 2000
					})
				} else {
					this.numer--
				}
				console.log(this.numer)
			},
			addNum() {
				this.numer++
				console.log(this.numer)
			},
			// 选择
			xuanze(index) {
				this.xzid = index
				this.selected = this.xzList[index].title + '、' + this.xzList2[this.xzid2].title
			},
			// 选择2
			xuanze2(index) {
				this.xzid2 = index
				this.selected = this.xzList[this.xzid].title + '、' + this.xzList2[index].title
			},
			// 更多评论
			toCommentList() {
				let paramsStr = `?ProductEntityId=${this.ProductEntityId}`
				console.log(paramsStr)
				uni.navigateTo({
					url: `/pages_category_page1/mine/comment${paramsStr}`
				})
			},




		}
	}
</script>

<style scoped>
	.goodsDetails {
		background: #f3f3f3;
		height: 100%;
		overflow: auto;
	}

	.conbox {
		padding-top: 170rpx;
		padding-bottom: 160rpx;
	}

	.swiperBox {
		position: relative;
	}

	.index-section-swiper {
		width: 100%;
		height: 464rpx;
	}

	.swiper-item {
		width: 100%;
		height: 464rpx;
	}

	.swiper-item .cell-icon {
		width: 100%;
		height: 464rpx;
	}

	.dots {
		background-color: rgba(228, 121, 23, .65);
		border-radius: 120rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #FFFFFF;
		position: absolute;
		right: 30rpx;
		bottom: 37rpx;
		padding: 8px 50rpx;
	}

	.box1 {
		padding: 30rpx;
		background: #fff;
	}

	.box1 .box1-title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.box1 .box1-title2 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 20rpx;
	}

	.box1-title3 {
		display: flex;
		margin-top: 6rpx;
	}

	.box1-title3>text {
		flex-shrink: 0;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #f61111;
	}

	.box1-title3 .text-totlo1 {
		line-height: 52rpx;
		vertical-align: middle;
	}

	.box1-title3 .text-totlo2 {
		font-size: 40rpx;
	}

	.sum-view {
		flex: 1;
		text-align: right;
		color: #000;
	}

	.sum-view .add1 {
		width: 34rpx;
		height: 34rpx;
		box-sizing: border-box;
		display: inline-block;
		background: #ffffff;
		border: 2rpx solid #e47917;
		border-radius: 50%;
		font-size: 22rpx;
		font-weight: 400;
		color: #000000;
		text-align: center;
	}

	.sum-view .add2 {
		background: #e47917;
		border: 2rpx solid #e47917;
		color: #fff;
	}

	.sum-view .add {
		display: inline-block;
		width: 50rpx;
		text-align: center;
		vertical-align: middle;
		color: #000;
	}

	/* box2 */
	.box2 {
		margin-top: 22rpx;
		padding-bottom: 48rpx;
	}

	.orderbox1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
	}

	.orderbox1 .leftText {
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		background: #e47917;
		border-radius: 4rpx;
		vertical-align: text-bottom;
		margin-right: 15rpx;
	}

	.text-view {
		padding: 29rpx 0;
	}

	.text-view text {
		display: inline-block;
		width: 200rpx;
		height: 78rpx;
		background: #ededed;
		border: 2rpx solid rgba(189, 189, 189, 0.20);
		border-radius: 42rpx;
		line-height: 78rpx;
		text-align: center;
		color: #000000;
		font-size: 28rpx;
		margin-right: 38rpx;
		margin-bottom: 16rpx;
	}
	.text-view text:nth-child(3n) {
		margin-right: 0;
	}
	.text-view text:last-child {
		margin-right: 0;
	}

	.text-view .active {
		color: #e47917;
		background: #fff0db;
		border: 2rpx solid rgba(228, 121, 23, 0.20);
		border-radius: 42rpx;
	}

	.text-view .uni-input {
		border: 1rpx solid #e5e5e5;
		padding: 16rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.selected {
		background: #ebebeb;
		border-radius: 20rpx;
		
		/* line-height: 86rpx; */
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #000000;
		padding: 27rpx 22rpx;
		box-sizing: border-box;
		margin-top: 60rpx;
	}

	.details {
		padding-top: 30rpx;
	}

	.details .details-title1 {
		padding: 20rpx 0;
		font-size: 30rpx;
	}

	.details .details-title2 {
		font-size: 26rpx;
	}
.details .details-title2 >P> img {
width: 100%;	}
	.qbComments-view {
		margin-top: 20rpx;
		font-size: 28rpx;
	}


	/* 按钮 */
	.btnbox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 75rpx;
		background: #fff;
	}

	.btnbox .btn {
		height: 112rpx;
		background: #e47917;
		border-radius: 10rpx;
		line-height: 112rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
	}
	rich-text {
	    word-break:break-all;
	}
	.call-store{
	    float: right;
	    text-align: center;
	    height: 45rpx;
	    background: #e47917;
	    border-radius: 10rpx;
	    line-height: 40rpx;
	    font-size: 32rpx;
	    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
	    font-weight: 400;
	    text-align: center;
	    color: #ffffff;
	    padding: 0 10rpx 0rpx 10rpx ;
	}
</style>